<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>婚纱照展示</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
	<!-- Link Swiper's CSS -->
	<link rel="stylesheet" href="css/swiper.min.css">

	<!-- Demo styles -->
	<style>
		html, body {
			position: relative;
			height: 100%;
		}
		body {
			background: #eee;
			font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
			font-size: 14px;
			color:#fff;
			margin: 0;
			padding: 0;
		}
		.swiper-container {
			width: 100%;
			height: 300px;
			margin-left: auto;
			margin-right: auto;
		}
		.swiper-slide {
			color:#fff;
			background-size: cover;
			background-position: center;
		}
		.gallery-top {
			height: 100%;
			width: 100%;
		}
		.swiper-slide .text {
			color: #A52A2A;
			text-shadow: 1px 1px 10px #F5F5F5;
			left: 0px;
			bottom: 0px;
			font-size: 20px;
			max-width: 80px;
			line-height: 1;
			position:absolute; 
			z-index:2;
		}
		.swiper-slide .swiper-lazy {
			height: 100%;
			width: 100%;
		}


  	</style>
</head>
<body>
	<!-- Swiper -->
	<div class="swiper-container gallery-top" id="swiper-top">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<img data-src="images/01.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader"></div>
				<!-- text 
				<div class="text" data-swiper-parallax="-100">
					<p>森系单车</p>
				</div>
				-->
			</div>
			<div class="swiper-slide">
				<img data-src="images/02.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader "></div>
			</div>
			<div class="swiper-slide">
				<img data-src="images/03.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader "></div>
			</div>
			<div class="swiper-slide">
				<img data-src="images/04.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader "></div>
			</div>
			<div class="swiper-slide">
				<img data-src="images/05.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader "></div>
			</div>
			<div class="swiper-slide">
				<img data-src="images/06.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader "></div>
			</div>
			<div class="swiper-slide">
				<img data-src="images/07.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader "></div>
			</div>
			<div class="swiper-slide">
				<img data-src="images/08.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader "></div>
			</div>
			<div class="swiper-slide">
				<img data-src="images/09.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader "></div>
			</div>
			<div class="swiper-slide">
				<img data-src="images/10.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader "></div>
			</div>
			<div class="swiper-slide">
				<img data-src="images/11.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader "></div>
			</div>
			<div class="swiper-slide">
				<img data-src="images/12.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader "></div>
			</div>
			<div class="swiper-slide">
				<img data-src="images/13.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader "></div>
			</div>
			<div class="swiper-slide">
				<img data-src="images/14.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader "></div>
			</div>
			<div class="swiper-slide">
				<img data-src="images/15.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader "></div>
			</div>
			<div class="swiper-slide">
				<img data-src="images/16.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader "></div>
			</div>
			<div class="swiper-slide">
				<img data-src="images/17.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader "></div>
			</div>
			<div class="swiper-slide">
				<img data-src="images/18.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader "></div>
			</div>
			<div class="swiper-slide">
				<img data-src="images/19.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader "></div>
			</div>
			<div class="swiper-slide">
				<img data-src="images/20.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader "></div>
			</div>
			<div class="swiper-slide">
				<img data-src="images/21.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader "></div>
			</div>
		</div>
		<!-- Add Pagination -->
		<div class="swiper-pagination"></div>
		<!-- Add Arrows -->
		<div class="swiper-button-next"></div>
		<div class="swiper-button-prev"></div>
	</div>

	<!-- rotate90 JS (强制图片在手机上旋转90度)-->
	<script src="js/rotate90.js"></script>

	<!-- Swiper JS -->
	<script src="js/swiper.min.js"></script>

	<!-- Initialize Swiper -->
	<script>
		var galleryTop = new Swiper('.gallery-top', {
		spaceBetween: 10,
		loop:true,
		loopedSlides: 5, //looped slides should be the same
		
		autoplay: {/*自动播放*/
			delay: 6000,/*播放间隔时间ms*/
			disableOnInteraction: false,
		},
		
		pagination: {
			el: '.swiper-pagination',
			type: 'progressbar',
		},
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
		lazy: {//延迟加载
			loadPrevNext: true,
		},
		});
	</script>
</body>
</html>
